<template>
	<view class="detail-wrap">
		<!-- <button @tap="openImg">openImg</button> -->
		<view class="common-line">
			<text class="order-no">配置单号：{{ detailInfo.orderNo }}</text>
			<text class="status-txt">{{ formatStatus(detailInfo.status) }}</text>
		</view>
		<view class="common-line">起点：{{ detailInfo.test }}</view>
		<view class="common-line">终点：{{ formatStatus(detailInfo.status) }}</view>
		<view class="common-line" style="display: block;">途经点：<text class="tjd">{{ detailInfo.test }}</text></view>
		<view class="common-line">总装货信息：{{ detailInfo.test }}</view>
		<view class="common-line">备注信息：{{ detailInfo.test }}</view>
		<view class="bar"></view>
		<view class="common-line">
			<text>运输订单信息：{{ detailInfo.orderNo }}</text>
			<label>
				<checkbox class="check-box" value="cb" />仅展示未卸货
			</label>
		</view>
		<view class="detail-item"  v-for="(item, index ) in list" :key="item.id">
			<view class="hc">
				<view class="bar"></view>
				<image class="icon-hc" src="@/static/hc.png" mode=""></image>
				<view class="bar"></view>
			</view>
			<view class="common-line">
				<text>运单号：{{ item.orderNo }}</text>
			</view>
		</view>
		
	</view>	
</template>

<script setup>
	import { reactive , ref } from 'vue';
	const list = ref([{
		id: 1,
		status: '2',
		orderNo: 'S2304235',
		test: ''
	}]);
	const detailInfo = reactive({
		orderNo: 'S56656',
		status: '1',
		test: '你是傻逼'
	});
	
	const formatStatus = (status)=> {
		const obj = {
			1: '待接单',
			2: '进行中',
			3: '已取消',
			4: '已完成'
		};
		return obj[status];
	}
	const openImg = ()=> {
		uni.chooseImage({
			count: 6, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album'], //从相册选择
			success: function (res) {
				console.log(JSON.stringify(res.tempFilePaths));
			}
		});
	}
</script>

<style lang="scss" scoped>
	.detail-wrap {
		border-top: 1rpx solid #e8e8e8;
		width: 100%;
		padding: 32rpx;
		box-sizing: border-box;
		.common-line {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			margin-bottom: 10rpx;
			color: #797979;
			.order-no {
				font-size: 30rpx;
				color: #333;
			}
			.tjd {
				color: #0000ff;
			}
		}
		.check-box {
			transform: scale(70%);
		}
		.bar {
			width: 100%;
			height: 2rpx;
			background-color: #e8e8e8;
			margin: 20rpx 0;
		}
		.hc {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 40rpx;
			margin-top: 40rpx;
			.bar {
				width: 30rpx;
				height: 2rpx;
				background-color: #e8e8e8;
				
			}
		}
		.adress-txt {
			font-size: 32rpx!important;
		}
		.icon-hc {
			width: 68rpx;
			height: 58rpx;
		}
		
	}
</style>